import { useMemo } from 'react';
import { Badge, Toast } from 'antd-mobile';
import { routerPrefix } from 'InbizConfig';
import { InbizIcon } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { getMessage } from '@inbiz/react';

import './style.less';

export default function Small(props: { modalIcon: any; associatePage: string; groupData: any[]; }) {
    const { modalIcon, associatePage, groupData } = props;
    const history = useInbizRouter();

    const goMore = () => {
        if (!associatePage) {
            Toast.show(getMessage('Message.tips.no_correlationPage'));
            return;
        }
        const [name] = associatePage.split(',');
        let url = `${routerPrefix}${name}`;
        history.push(url);
    };

    const count = useMemo(() => {
        let _count = 0;
        groupData?.map((item: { Count: number; }) => {
            _count = _count + item?.Count
        });
        return _count && _count != 0 ? _count > 99 ? '99+' : _count : null;
    }, [groupData]);

    return (
        <div
            className="message-h5-small-wrapper"
            onClick={goMore}
        >
            <Badge
                content={count}
                bordered={true}
                wrapperClassName='message-h5-small-badge'
            >
                <div
                    className="message-h5-small-icon"
                    style={{ color: modalIcon?.color || '#666' }}
                >
                    <InbizIcon
                        type={modalIcon?.type}
                        style={{
                            fontSize: 24,
                        }}
                    />
                </div>
            </Badge>
        </div>
    )
};